<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title>COSPLAY平面大赛</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="icon" href="favicon.ico">

    <style>
        body {
            background: url('img/background.jpg');
            background-size: 100%;
            background-repeat: no-repeat;
        }

        .gameInfo {
            margin-top: 15%;
            background: rgba(255,255,255,.7);
            padding: 4%;
            border-radius: 50px;
            width: 50%;
        }

        .gameInfoTimeAdd {
            margin-top: 5%;
        }

        .gameBtn {
            margin-top: 10%;
        }

        .gameBtn > button {
            outline: none;
            background: rgb(289,128,128);
            border: 1px solid rgb(289,128,128);
        }

        .btn-info:hover {
            outline: none;
            background: rgb(289,125,128);
            border: 1px solid rgb(255,255,255);
        }

        .btn-info:focus, .btn-info.focus {
            outline: none;
            background: rgb(289,128,128);
            border: 1px solid rgb(289,128,128);
        }
        .btn-info:active:hover,
        .btn-info.active:hover,
        .btn-info:active:focus,
        .btn-info.active:focus,
        .btn-info:active.focus,
        .btn-info.active.focus {
            outline: none;
            background: rgb(289,128,128);
            border: 1px solid rgb(289,128,128);
        }

        p {
            font-size: 15px;
        }

        @media screen and (max-width: 600px){
            .gameInfo {
                margin-top: 68%;
                background: none;
                padding: 2%;
                border-radius: 0;
                width: 100%;
            }
        }
    </style>

</head>
<body>
    <div class="container samaGameBox">
        <div class="gameInfo">
            <h1>COSPLAY平面大赛</h1>
            <div class="gameInfoTimeAdd">
                <p>sama第一届cosplay平面大赛来啦~xxxxxxx我实在想不出来说什么了。</p>
                <p>时间：xxxx:xx:xx</p>
                <p>地点：xxxxxx</p>
            </div>
            <div class="gameBtn">
                <button class="btn btn-info btn-lg" data-toggle="modal" data-target="#viewRules" >查看规则</button>
                <span>&nbsp;&nbsp;</span>
                <button class="btn btn-info btn-lg" data-toggle="modal" data-target="#signUp">报名参加</button>
            </div>
        </div>
    </div>

    <!-- 查看规则模态框 -->
    <div class="modal fade" id="viewRules" tabindex="-1" role="dialog" aria-labelledby="rules" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="rules">活动规则</h4>
                </div>
                <div class="modal-body">
                    <p>1.报名者必须为sama认证账号，且是该账号拥有者本人。报名需提交账号UID以及注册手机号。（uid在app中我的—主页—资料中查看）。</p>
                    <p>2.参赛选手需在比赛频道发表相关作品，并设定限价为1元。</p>
                    <p>3.参赛选手必须为参赛作品中的COSER本人，剽窃他人作品者将取消获奖资格。同一套参赛作品不能由多人提交，重复参赛。</p>
                    <p>4.参赛的照片不能在其它平台发布过，并且参赛后也不得在其它平台发布。</p>
                    <p>5.每人可以提交多组作品，但只统计一个作品的赞赏数，以最高赞赏数为准</p>
                    <p>6、题材可为参赛作品限定为COSPLAY作品，不接受无人物设定的原创、拟人、性转等作品参赛，不接受违反国家法律或侵害其他版权形象的作品主办方有权取消其参赛资格，作品一经提交视为同意比赛相关规定。</p>
                    <p>8、投票规则：需要登录Sama字母圈（Sama赞赏照）对于帖子进行投票</p>
                    <p>9、参赛者所提交的作品必须由参赛者本人创作或参与创作，并确认拥有作品的著作权及版权，参赛者应确认其作品的原创性，主办单位不承担因作品侵犯他人（或单位）的权利而产生的法律责任，其法律责任由参赛者本人承担并立即取消参赛资格.</p>
                    <p>10、谢绝一稿多投，一经发现，主办方将取消作品的评选资格。</p>
                    <p>11、主办方对本活动保留最终解释权。</p>
                    <p>【举报规则】</p>
                    <p>在比赛中，如果遇到以下情况的参赛作品，可以在参赛作品页面中向主办方或承办方进行举报，主办方将根据大赛章程进行处理——</p>
                    <p>1.参赛作品涉及色情、暴力以及和中国的国家法律相抵触的内容。</p>
                    <p>2.参赛选手剽窃他人作品进行参赛。</p>
                    <p>3.参赛作品的共同版权所有者对作品参赛具有异议。</p>
                    <p>4.不符合参赛规则的参赛作品。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

    <!--参加报名模态框-->
    <div class="modal fade" id="signUp" tabindex="-1" role="dialog" aria-labelledby="fillInInfo" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="fillInInfo">填写报名单</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label">Sama UID:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="firstname" placeholder="请输入Sama UID">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="lastname" class="col-sm-2 control-label">手机号码：</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="lastname" placeholder="请输入手机号码：">
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox">我已阅读相关规则
                                    </label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-info">提交</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>